<template>
  <div>
    <navTop text="栏目管理" />

    <h4>点击删除一下频道,拖动调整位置</h4>
    <draggable v-model="deletes" v-bind="{ animation: 500,scroll:false }">
      <transition-group>
        <!-- <div class="deletes"> -->
        <div
          v-for="(item, index) in deletes"
          :key="item.id"
          class="deletess"
          @click="deleteS(index)"
        >{{ item.name }}</div>
        <!-- </div> -->
      </transition-group>
    </draggable>
    <h4>点击添加频道</h4>
    <!-- <div class="add"> -->
    <draggable v-model="add" v-bind="{ animation: 500 ,scroll:false}">
      <transition-group>
        <div
          v-for="(item, index) in add"
          :key="item.id"
          class="adds"
          @click="addS(index)"
        >{{ item.name }}</div>
      </transition-group>
    </draggable>
  </div>
  <!-- </div> -->
</template>

<script>
// import draggable from "vuedraggable";
// import navTop from "../../components/navTop";
export default {
  components: {
    navTop: () => import("../../components/navTop"),
    draggable: () => import("vuedraggable")
  },
  data() {
    return {
      deletes: [],
      add: []
    };
  },
  watch: {
    add() {
      localStorage.setItem("deletes", JSON.stringify(this.add));
    },
    deletes() {
      localStorage.setItem("add", JSON.stringify(this.deletes));
    }
  },
  methods: {
    addS(index) {
      this.deletes.push(this.add[index]);
      this.add.splice(index, 1);

      // console.log(index);
    },
    deleteS(index) {
      if (this.deletes.length == 1) {
        this.$toast.fail("请至少保留一个栏目");
        return;
      }
      this.add.push(this.deletes[index]);
      this.deletes.splice(index, 1);
      // console.log(index);
    }
  },
  created() {
    if (localStorage.getItem("add") || localStorage.getItem("deletes")) {
      this.deletes = JSON.parse(localStorage.getItem("add"));
      this.add = JSON.parse(localStorage.getItem("deletes"));
    } else {
      this.$axios({
        url: "/category"
      }).then(res => {
        this.deletes = res.data.data.filter((res, index) => {
          return index < 21;
        });
        // console.log(this.add);
      });
    }
  }
};
</script>

<style lang="less" scoped>
h4 {
  padding: 10px;
  font-size: 16px;
}
h5 {
  font-size: 12px;
  padding: 0 0 10px 10px;
  color: #888;
}
// .deletes,
// .add {

//   border-bottom: 1px solid #9888;

.deletess,
.adds {
  display: inline-block;
  // // flex-wrap: wrap;
  margin: 10px;
  border: 1px solid #888;
  height: 25px;
  text-align: center;
  line-height: 25px;
  padding: 10px;
  width: 20%;
  font-size: 14px;
  border-radius: 10px;
}
// }
</style>
